<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border</title>
    <style>



        .c2{
           
            height: 50px;
            /* border-width: 30px;  */
            /* 边框必须设置为solid才能看到边框图 有效果出来, 1*/
            border:10px solid transparent;
            /* border-image 的border,后面的27对应九宫格的4条裁剪线,也可以用百分比, 对应的是 top rignt bottome left, 如果都设置一样只写一个27就行了*/
            /* stretch 表示拉伸 */
            border-image:url(./border_image_button.png) 10 14 10 14  fill stretch ; 
            
        }



        /* 对以上属性拆开写法 */
        .c3{
            height: 50px;
            width: 100px;
            border:10px solid transparent;
            border-image-source: url(./border_image_button.png);
	        border-image-slice: 10 14 10 14 fill;
	        border-image-repeat: stretch stretch;

        }

     
    </style>
</head>
<body>
  
    <!-- 实现一个圆角按钮的效果 -->
    <div class="c2">  </div>

     <!-- 实现一个圆角按钮的效果 -->
     <div class="c3"> 
    <p>这是一个按钮</p>     
    </div>
    

    <p> <span> <a href="https://blog.csdn.net/qq_41903941/article/details/90259306" >border-image的详细用法</a></span>  </p>

</body>
</html>